<template>
  <div class="shopping_cart">
    <div class="search">
      <router-link to="/" class="log" tag="div">
        <img src="../../public/images/img/arrow_left.png" alt="" />
      </router-link>
      <div class="sear">购物车</div>
      <div class="cai">
        <img src="../../public/images/img/menu.png" alt="" />
      </div>
    </div>

    <div class="content">
      <div class="list_null" v-if="!goods || !goods.length">
        <p>您还没有购买任何商品</p>
        <div>
          <router-link to="/" tag="a" href="#">逛一逛</router-link>
          <router-link to="/" tag="a" href="#">我的收藏</router-link>
        </div>
      </div>

      <!-- 图数 -->

      <div class="block" v-if="goods && goods.length">
        <div class="cart_list">
          <div class="shop_title">
            <div
              class="c_checkbox"
              :class="['c_checkbox', checkedAll ? 'con' : '']"
              @click="selectAll_btn"
            ></div>

            <div class="title">才华书城</div>
            <div class="edit_operate">编辑</div>
          </div>

          <div
            class="cart_item"
            v-for="item in goods"
            :key="item.goodID"
            v-show="item.type == '图书'"
          >
            <div
              :class="['c_checkbox', item.checked ? 'con' : '']"
              v-show="!item.edit"
              @click="checked(item.id)"
            ></div>
            <div class="img">
              <img :src="item.img[0]" alt="" />
            </div>

            <div class="item_show" v-show="!item.edit">
              <div class="detail">
                <div class="prd_tit">{{ item.name }}</div>
                <div class="caihua_price">
                  <div class="price">
                    ￥{{ (item.money * item.num).toFixed(2) }}
                  </div>
                  <del class="price_old">
                    ￥{{ (item.originalPrice * item.num).toFixed(2) }}</del
                  >
                </div>
                <p class="biao_qian">
                  <span style="background: #ff5753">限时抢</span>
                </p>
              </div>
              <div class="prd_desc">
                <div class="nums">
                  x<span>{{ item.num }}</span>
                </div>
                <div class="edit_own_ope" @click="edit_own_ope(item.id)"></div>
              </div>
            </div>

            <div class="edit_area" v-show="item.edit">
              <div class="left">
                <div class="edit_num">
                  <div
                    class="sub iconfont icon-jianshao"
                    @click="sub(item.id)"
                  ></div>
                  <input type="number" class="num" :value="item.num" />
                  <div
                    class="add iconfont icon-zengjia"
                    @click="add(item.id)"
                  ></div>
                </div>
                <div class="delete_btn">
                  <div class="price">
                    ￥ {{ (item.money * item.num).toFixed(2) }}
                  </div>
                  <span
                    class="iconfont icon-icon"
                    @click="remov(item.id)"
                  ></span>
                </div>
              </div>
              <div class="right" @click="edit_own_ope(item.id)">
                <span>完成</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 电子书 -->
      <!-- <div class="block" v-if="goods&&goods.length">
        <div class="cart_list">
          <div class="shop_title">
            <div
              class="c_checkbox"
              :class="['c_checkbox', checkedAll ? 'con' : '']"
              @click="selectAll_btn"
            ></div>

            <div class="title">才华书城电子书</div>
            <div class="edit_operate">编辑</div>
          </div>

          <div
            class="cart_item"
            v-for="item in goods"
            :key="item.pNum"
            v-show="item.type == '电子书'"
          >
            <div
              :class="['c_checkbox', item.checked ? 'con' : '']"
              v-show="!item.edit"
              @click="checked(item.id)"
            ></div>
            <div class="img">
              <img :src="item.img[0]" alt="" />
            </div>

            <div class="item_show" v-show="!item.edit">
              <div class="detail">
                <div class="prd_tit">{{ item.name }}</div>
                <div class="caihua_price">
                  <div class="price">
                    ￥{{ (item.money * item.num).toFixed(2) }}
                  </div>
                  <del class="price_old">
                    ￥{{ (item.originalPrice * item.num).toFixed(2) }}</del
                  >
                </div>
                <p class="biao_qian">
                  <span style="background: #ff5753">限时抢</span>
                </p>
              </div>
              <div class="prd_desc">
                <div class="nums">
                  x<span>{{ item.num }}</span>
                </div>
                <div class="edit_own_ope" @click="edit_own_ope(item.id)"></div>
              </div>
            </div>

            <div class="edit_area" v-show="item.edit">
              <div class="left">
                <div class="edit_num">
                  <div
                    class="sub iconfont icon-jianshao"
                    @click="sub(item.id)"
                  ></div>
                  <input type="number" class="num" :value="item.num" />
                  <div
                    class="add iconfont icon-zengjia"
                    @click="add(item.id)"
                  ></div>
                </div>
                <div class="delete_btn">
                  <div class="price">
                    ￥ {{ (item.money * item.num).toFixed(2) }}
                  </div>
                  <span
                    class="iconfont icon-icon"
                    @click="remov(item.id)"
                  ></span>
                </div>
              </div>
              <div class="right" @click="edit_own_ope(item.id)">
                <span>完成</span>
              </div>
            </div>
          </div>
        </div>
      </div> -->
    </div>

    <!-- 底部结算 -->
    <div class="total_result" v-if="goods && goods.length">
      <div class="left">
        <div
          class="c_checkbox"
          :class="['c_checkbox', checkedAll ? 'con' : '']"
          @click="selectAll_btn"
        ></div>
        <span>全选</span>
      </div>
      <div class="right">
        <div class="totalPrice">
          <span>合计</span>
          <div class="cart_price">￥{{(total).toFixed(2)}}</div>
        </div>
        <router-link to="/ordersettlement" tag="div" class="settlement">
          <span>结算</span>
          <span>{{sum>0?'('+sum+')':''}}</span>
        </router-link>
      </div>
    </div>

    <enjoy-list></enjoy-list>

  </div>
</template>

<script>
import { getHomepageBall } from "../api/home";
import EnjoyList from '../components/EnjoyList.vue';

export default {
  components: { EnjoyList },
  data() {
    return {
      booksData: [],
      nums:0,
      goods: null,
    };
  },
  computed: {
    checkedAll: {
      get() {
        return this.goods.every((item) => {
          window.localStorage.setItem("goodsData", JSON.stringify(this.goods));
          return item.checked; //只要有一个false不满足条件
        });
      },
      set(value) {
        this.goods.forEach((item) => {
          item.checked = value;
          window.localStorage.setItem("goodsData", JSON.stringify(this.goods));
        });
      },
    },
    //总价
    total:function() {
      
      return this.goods.reduce( (total, item)=> {
        if (item.checked) {
          
          return (total += item.money * item.num);
        } else {
          
          return total;
        }
      }, 0);
    },
    //总数量
   sum:function() {
      
      return this.goods.reduce( (total, item)=> {
        if (item.checked) {
          
          return total += item.num;
        } else {
          
          return total;
        }
      }, 0);
    },
  },

  methods: {
    getHomepageBallFun() {
      getHomepageBall().then((data) => {
        this.booksData = data.booksData;
        // console.log(this.booksData);
      });
    },
    selectAll_btn() {
      this.selectAll = !this.selectAll;
      this.goods.forEach((item) => {
        item.checked = this.selectAll;
      });
      window.localStorage.setItem("goodsData", JSON.stringify(this.goods));
    },
    checked(id) {
      // console.log(id);
      let index = this.goods.findIndex((item) => item.id == id);
      this.goods[index].checked = !this.goods[index].checked;
      window.localStorage.setItem("goodsData", JSON.stringify(this.goods));
    },

    remov(id) {
      let index = this.goods.findIndex((item) => item.id == id);
      this.goods.splice(index, 1);
      window.localStorage.setItem("goodsData", JSON.stringify(this.goods));
    },
    add(id) {
      let index = this.goods.findIndex((item) => item.id == id);
      this.goods[index].num += 1;
      window.localStorage.setItem("goodsData", JSON.stringify(this.goods));
    },
    sub(id) {
      let index = this.goods.findIndex((item) => item.id == id);
      if (this.goods[index].num > 1) {
        this.goods[index].num -= 1;
        window.localStorage.setItem("goodsData", JSON.stringify(this.goods));
      }
    },

    edit_own_ope(id) {
      let index = this.goods.findIndex((item) => item.id == id);
      //  console.log(index);
      //  console.log(id);
      this.goods[index].edit = !this.goods[index].edit;
      window.localStorage.setItem("goodsData", JSON.stringify(this.goods));
    },
  },
  created() {
    this.getHomepageBallFun();
    if (localStorage.getItem("goodsData")) {
      this.goods = JSON.parse(localStorage.getItem("goodsData"));
      // console.log(this.goods);
    }
  },
};
</script>

<style lang="scss" scoped>
.shopping_cart {
  position: relative;
  background-color: #f2f2f2;

  .total_result {
    height: 56px;
    border-top: 1px solid #e6e6e6;
    position: fixed;
    background-color: #fff;
    bottom: 0px;
    z-index: 5;
    left: 0px;
    width: 100%;
    display: flex;
    .right {
      flex: 1;
      display: flex;
      .totalPrice {
        padding-right: 17px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .cart_price {
          font-size: 16px;
          color: #ff2832;
        }
        span {
          font-size: 16px;
          color: #464646;
        }
      }
      .settlement {
        height: 56px;
        width: 102px;
        background-color: #fb4741;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          font-size: 16px;
          color: #fff;
        }
      }
    }
    .left {
      display: flex;

      height: 56px;
      align-items: center;
      .c_checkbox {
        width: 26px;
        height: 26px;
        margin: auto 10px;
        border: none;
        background-image: url("../../public/images/img/c_checkbox_off.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        border-radius: 20px;
      }
      .c_checkbox.con {
        background-image: url("../../public/images/img/c_checkbox_on.png");
      }
      span {
        font-size: 16px;
        color: #787878;
      }
    }
  }
  .search {
    height: 44px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d8d8d8;
    position: sticky;
    top: 0;
    background-color: #fff;
    z-index: 2;
    .log {
      width: 40px;
      height: 39.5px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 10px;
        height: 17px;
      }
    }
    .cai {
      width: 40px;
      height: 39.5px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 21px;
        height: 7px;
      }
    }
    .sear {
      height: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 17px;
      justify-content: center;
      color: #333;
      i {
        width: 14px;
        height: 14px;
        display: block;
        margin: 0 9px;
        font-weight: bold;
        color: #767b83;
      }
      span {
        color: #999999;
        font-size: 14px;
      }
    }
  }

  .content {
    .block {
      margin-top: 5px;
      background-color: #fff;
      border-top: 1px solid #ededed;
      .cart_list {
        .cart_item {
          border-top: 1px solid #e6e6e6;
          border-bottom: 1px solid #fafafa;
          display: flex;
          .edit_area {
            margin-top: 11px;
            display: flex;
            flex: 1;
            justify-content: space-between;
            .left {
              .edit_num {
                border: 1px solid #d5d5d5;
                display: flex;
                align-items: center;
                .num {
                  border: none;
                  outline: none;
                  width: 85px;
                  height: 42px;
                  border-left: 1px solid #d5d5d5;
                  border-right: 1px solid #d5d5d5;
                  text-align: center;
                  font-size: 18px;
                }
                .sub,
                .add {
                  width: 44px;
                  height: 42px;
                  line-height: 42px;
                  text-align: center;
                  font-size: 28px;
                  color: #ff4650;
                }
              }
              .delete_btn {
                display: flex;
                justify-content: space-between;
                margin-top: 10px;
                align-items: center;
                height: 50px;
                .price {
                  font-size: 16px;
                  color: #ff2832;
                }
                span {
                  font-size: 30px;
                }
              }
            }
            .right {
              margin: 0px 11px;
              background-color: #f0f0f0;
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 11px;
              span {
                font-size: 16px;
                color: #646464;
              }
            }
          }
          .item_show {
            flex: 1;
            margin-top: 11px;
            .prd_desc {
              margin-top: 5px;
              display: flex;
              justify-content: space-between;
              align-items: center;

              padding-right: 11px;
              .edit_own_ope {
                width: 23px;
                height: 23px;
                background-image: url("../../public/images/img/edit.png");
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
              }
              .nums {
                color: #646464;
                font-size: 14px;
              }
            }
            .detail {
              margin-right: 11px;
              .biao_qian {
                span {
                  padding: 3px;
                  color: #fff;
                }
              }
              .caihua_price {
                display: flex;
                align-items: center;
                margin: 4px 11px 4px 0;
                .price {
                  font-size: 15px;
                  color: #ff2832;
                }
                .price_old {
                  font-size: 15px;
                  display: block;
                  color: #b8b8b8;
                  margin-left: 4px;
                }
              }
              .prd_tit {
                font-size: 14px;
                color: #323232;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
          }
          .img {
            width: 105px;
            height: 105px;
            margin: 11px 11px 11px 0;
            img {
              width: 100%;
              display: block;
            }
          }
          .c_checkbox {
            width: 26px;
            height: 26px;
            margin: auto 10px;
            border: none;
            background-image: url("../../public/images/img/c_checkbox_off.png");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            border-radius: 20px;
          }
          .c_checkbox.con {
            background-image: url("../../public/images/img/c_checkbox_on.png");
          }
        }
        .shop_title {
          display: flex;
          align-items: center;
          color: #787878;
          .edit_operate {
            font-size: 14px;
            padding: 0 11px;
          }
          .title {
            flex: 1;
            font-size: 16px;
            font-weight: 700;
          }
          .c_checkbox {
            width: 26px;
            height: 26px;
            margin: 10px 10px;
            border: none;
            background-image: url("../../public/images/img/c_checkbox_off.png");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            border-radius: 20px;
          }
          .c_checkbox.con {
            background-image: url("../../public/images/img/c_checkbox_on.png");
          }
        }
      }
    }

    .list_null {
      padding-top: 198px;
      padding-bottom: 22px;
      color: #777777;
      background: url("../../public/images/img/cart_null.gif") center 42px
        no-repeat;
      background-size: 166px 136px;
      background-color: #f2f2f2;
      p {
        font-size: 14px;
        text-align: center;
        height: 34px;
        line-height: 34px;
      }
      div {
        display: flex;
        justify-content: center;
        a {
          width: 33%;
          color: #777777;
          font-size: 18px;
          margin: 0 10px;
          border: 1px solid #777;
          border-radius: 6px;
          text-align: center;
          height: 38px;
          line-height: 38px;
        }
      }
    }
  }

  
}
</style>